/* eslint-disable no-unused-vars */
import React, { useEffect, useState } from "react";
import './launchmode2.css';
import { useHistory } from "react-router-dom/cjs/react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import icon_banner2_mode1 from "@/assets/icon_banner2_mode1.png"
import icon_banner2_mode2 from "@/assets/icon_banner2_mode2.png"
import icon_banner2_mode3 from "@/assets/icon_banner2_mode3.png"
import icon_banner2_mode4 from "@/assets/icon_banner2_mode4.png"
import icon_banner2_mode5 from "@/assets/icon_banner2_mode5.png"
import icon_banner2_mode6 from "@/assets/icon_banner2_mode6.png"

import icon_logo1 from "@/assets/icon_logo1@2x.png"
import icon_about_arrow from '@/assets/icon_about_arrow@2x.png'

import { saveEvent } from "@/store/actions/saveEvent";
import NavigateBar from "@/components/NavigateBar";
import { LangEnGhs } from "@/utils/langEnGhs";
import { LangStore } from "@/utils/langStore";

/**
 * 落地页-1
 */
export default function LaunchMode1() {

    // 获取路由历史 history 对象
    const history = useHistory()

    // 文案翻译
    const [curLang, setCurLang] = useState(LangEnGhs);

    // 文案翻译
    const [curAppStore, setCurAppStore] = useState(LangStore);

    //获取 Redux 分发器
    const dispatch = useDispatch()

    const banners = [icon_banner2_mode2, icon_banner2_mode3, icon_banner2_mode4, icon_banner2_mode5, icon_banner2_mode6, icon_banner2_mode1,]

    const items = banners.map((banner, index) => (
        <img className="launchmode2SwiperItemImageSelf" src={banner} alt="" key={index} />
    ))

    //点击下载-adjust
    const onHandleInstallClick = () => {

        onDownloadModeADScript();

        // let clickURL = "https://app.adjust.com/1acjhhxy?engagement_type=fallback_click";
        // window.open(clickURL, "_blank")
    }

    /**
    * 下载模式四：
    * 使用 Adjust 智能脚本，需要确认 index.html 接入了AD的脚本js
    * 打开注解释，替换参数使用
    */
    const onDownloadModeADScript = () => {
        const apkUrl = process.env.REACT_APP_PATH_APK + "";
        let adUrl = window.AD_TRACKER_URL || "";
        console.log("======" + adUrl);

        if (adUrl.length > 0) {
            window.open(adUrl, "_blank")
        } else {
            window.open(apkUrl, "_blank")
        }
    }

    //打点接口
    const doHitEvent = async (type, remark = "") => {
        console.log("doHitEvent: " + type + " , " + remark);

        try {
            //获取Action
            const action = saveEvent(type, remark)

            //触发接口
            await dispatch(action)

        } catch (e) {
            console.log(e)
        }
    }

    //启动时请求用户状态
    useEffect(() => {
        //打点
        doHitEvent("launchmode2_START")

        // 设置语言
        var language = "en";
        let timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
        console.log("timeZone:" + timeZone);
        console.log("language:" + language);

        //加纳 单包
        setCurLang(LangEnGhs);

        return () => {
            //打点
            doHitEvent("launchmode2_END")
        }
    }, [])

    return (
        <div className="launchmode2Root">
            <NavigateBar theme="transparent" onAddFavorite={() => { }} onAddHome={() => { }}></NavigateBar>

            {/* app 图标 */}
            <div className="launchmode2RowGlobalPadding">
                <img className="launchmode2AppLogo" src={icon_logo1} alt="" />

                <div className="launchmode2ColumnFullRight launchmode2PaddingLeft16Px">
                    <span className="launchmode2AppName">{curLang.appName}</span>
                    <span className="launchmode2AppOwner launchmode2MarginTop5Px">{curLang.appDev}</span>
                </div>
            </div>

            {/* 评价、下载量 */}
            <div className="launchmode2RowGlobalPadding launchmode2MarginTop32Px launchmode2FlexCenter">
                <div className="launchmode2ColumnStoreItem">
                    <div className="launchmode2StoreText">{curAppStore.appReviewStar}</div>
                    <div className="launchmode2StoreTips launchmode2MarginTop5Px">{curAppStore.appReviewCount} {curLang.reviews}</div>
                </div>

                {/* <div className="launchmode2Space22Px"></div> */}

                <div className="launchmode2ColumnStoreItem">
                    <div className="launchmode2StoreText">{curAppStore.appDownloadCount}</div>
                    <div className="launchmode2StoreTips launchmode2MarginTop5Px">{curLang.downloads}</div>
                </div>

                {/* <div className="launchmode2Space22Px"></div> */}

                <div className="launchmode2ColumnStoreItem">
                    <div className="launchmode2StoreTextAgeLimit">{curAppStore.appAgeLimit}</div>
                    <div className="launchmode2StoreTips launchmode2MarginTop5Px">{curLang.ratedFor3Plus}</div>
                </div>
            </div>

            {/* 跳转应用市场 */}
            <div className="launchmode2RowGlobalPadding launchmode2FlexCenter launchmode2MarginTop42Px launchmode2Padding26Px">
                <div className="launchmode2BtnInstall" onClick={onHandleInstallClick}>
                    <div className="launchmode2InstallText">{curLang.toInstall}</div>
                </div>
            </div>

            {/* banner */}
            <div className="launchmode2RowGlobalPadding launchmode2MarginTop60Px">
                <div className="launchmode2SwiperContent">
                    {/* <Swiper
                        indicator={() => null}
                        defaultIndex={0}>
                        {items}
                    </Swiper> */}
                    {items}
                </div>
            </div>

            {/* 申请步骤 */}
            <div className="launchmode2RowGlobalPadding launchmode2MarginTop17Px">
                <div className="launchmode2StepTitle">{curLang.aboutThisApp}</div>
                <img className="launchmode2StepIcon" src={icon_about_arrow} alt="" onClick={onHandleInstallClick} />
            </div>

            {/* 申请步骤 */}
            <div className="launchmode2RowGlobalPadding launchmode2FlexCenter launchmode2MarginTop10Px">
                <div className="launchmode2StepText">
                    {curLang.appStoreListingRow1}<br></br>
                    {curLang.appStoreListingRow2}<br></br>
                    {curLang.appStoreListingRow3}<br></br>
                    {curLang.appStoreListingRow4}<br></br>
                    {curLang.appStoreListingRow5}<br></br>
                    {curLang.appStoreListingRow6}<br></br>
                </div>
            </div>

            {/* 申请步骤 */}
            <div className="launchmode2ColumnGlobalPadding launchmode2MarginTop14Px">
                <div className="launchmode2StepTitle launchmode2FontSize14px">{curLang.updatedOn}</div>
                <div className="launchmode2StepText launchmode2FontColorUpdate launchmode2MarginTop5Px">{curLang.updatedDate}</div>
            </div>

            {/* 标签 */}
            <div className="launchmode2RowGlobalPadding launchmode2MarginTop28Px">
                <div className="launchmode2CateTag">{curLang.topFreeFinance}</div>
                <div className="launchmode2Space11Px"></div>
                <div className="launchmode2CateTag">{curLang.finance}</div>
            </div>

            {/* 底部标签 */}
            <div className="launchmode2Space11Px launchmode2MarginTop42Px"></div>

        </div>
    )
}